import React from 'react'

export default (props)=>{
    let v = props.pages
    //渲染页面pages
    function pages() {
        if (v <= 3) {
            return [1, 2, 3, 4, 5]
        } else {
            return [v - 2, v - 1, v, v + 1, v + 2]
        }
    }
    function updatePage(e,k){
        switch(k){
            case 'prev':
                if (v <= 1) {
                    alert('当前已经是第一页了!')
                } else {
                    v--
                }
                console.log(props);
                props.onPrev(v)
                break
            case 'next':
                props.onNext(v + 1)
                break
            case 'current':
                // console.log(e.target.innerHTML);
                props.onCurrent(parseInt(e.target.innerHTML))
                break

        }
    }
    return(
        <div className='pages'>
            <span onClick={(e) => updatePage(e,'prev')}>{'<<'}</span>
                {
                    v > 3 && <span>...</span>
                }
                {
                    pages().map((ele,idx)=>(
                        <span key={idx} className={ele==v?"on":""} onClick={(e) => updatePage(e,'current')}>{ele}</span>
                    ))
                }
            <span>...</span>
            <span onClick={(e) => updatePage(e,'next')}>{'>>'}</span>
        </div>
    )
}